{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "dc3695a4",
   "metadata": {},
   "source": [
    "# 数据产品设计-2"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "563e9db8",
   "metadata": {},
   "source": [
    "## 数据准备"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "1fcd16f6",
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "2023-03-22 09:17:43.802 INFO    numexpr.utils: Note: NumExpr detected 12 cores but \"NUMEXPR_MAX_THREADS\" not set, so enforcing safe limit of 8.\n",
      "2023-03-22 09:17:43.806 INFO    numexpr.utils: NumExpr defaulting to 8 threads.\n"
     ]
    }
   ],
   "source": [
    "import streamlit as st\n",
    "from streamlit_echarts import st_echarts\n",
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar\n",
    "from streamlit_echarts import st_pyecharts\n",
    "import pandas as pd\n",
    "import numpy as np"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "4ad21efa",
   "metadata": {},
   "outputs": [],
   "source": [
    "a=pd.read_csv(r\"D:\\try\\shoes.csv\")\n",
    "a.sales=a.sales.str.replace(\"人付款\",\"\").astype(int)\n",
    "#求出各个商品的销售额并把它并入到原始数据框中去\n",
    "z1=a.sales*a.price\n",
    "z1.name=\"xse\"\n",
    "a1=pd.concat([a,z1],axis=1)#给序列命名之后添加入数据框就会直接以序列名作为列标"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "bfb5ddab",
   "metadata": {},
   "outputs": [],
   "source": [
    "#先做成字典，把各个特征放入字典中\n",
    "te_zheng={\"nick\":[],\"z_xse\":[],\"z_num\":[],\"p_sales\":[],\"p_bdj\":[],\"p_price\":[]}\n",
    "for i in a1.groupby(\"nick\"):\n",
    "    te_zheng[\"nick\"].append(i[0])\n",
    "    te_zheng[\"z_xse\"].append(i[1].xse.sum())\n",
    "    te_zheng[\"z_num\"].append(len(i[1]))\n",
    "    te_zheng[\"p_sales\"].append(round(i[1].sales.mean(),1))\n",
    "    if i[1].sales.sum()==0:#存在除零的情况，所以做判断\n",
    "        te_zheng[\"p_bdj\"].append(0)\n",
    "    else:\n",
    "        te_zheng[\"p_bdj\"].append(round(i[1].xse.sum()/i[1].sales.sum(),1))\n",
    "    te_zheng[\"p_price\"].append(round(i[1].price.mean(),1))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "0f9df1da",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>z_xse</th>\n",
       "      <th>z_num</th>\n",
       "      <th>p_sales</th>\n",
       "      <th>p_bdj</th>\n",
       "      <th>p_price</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>nick</th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>意尔康皮鞋旗舰店</th>\n",
       "      <td>3558446.0</td>\n",
       "      <td>289</td>\n",
       "      <td>47.8</td>\n",
       "      <td>257.4</td>\n",
       "      <td>485.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>意尔康男鞋旗舰店</th>\n",
       "      <td>792685.0</td>\n",
       "      <td>149</td>\n",
       "      <td>18.0</td>\n",
       "      <td>296.3</td>\n",
       "      <td>680.8</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>意尔康品牌店</th>\n",
       "      <td>114452.0</td>\n",
       "      <td>65</td>\n",
       "      <td>7.7</td>\n",
       "      <td>229.8</td>\n",
       "      <td>271.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>乙方乙方88888</th>\n",
       "      <td>88144.0</td>\n",
       "      <td>9</td>\n",
       "      <td>60.3</td>\n",
       "      <td>162.3</td>\n",
       "      <td>164.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>吸引力xl</th>\n",
       "      <td>43870.0</td>\n",
       "      <td>5</td>\n",
       "      <td>59.0</td>\n",
       "      <td>148.7</td>\n",
       "      <td>152.0</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "               z_xse  z_num  p_sales  p_bdj  p_price\n",
       "nick                                                \n",
       "意尔康皮鞋旗舰店   3558446.0    289     47.8  257.4    485.7\n",
       "意尔康男鞋旗舰店    792685.0    149     18.0  296.3    680.8\n",
       "意尔康品牌店      114452.0     65      7.7  229.8    271.5\n",
       "乙方乙方88888    88144.0      9     60.3  162.3    164.7\n",
       "吸引力xl        43870.0      5     59.0  148.7    152.0"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "# 把字典转化为数据框，并基于销售额排序\n",
    "df_te_zheng=pd.DataFrame(te_zheng)\n",
    "df_te_zheng.sort_values(by=\"z_xse\",ascending=False,inplace=True)\n",
    "df_te_zheng.set_index(\"nick\",inplace=True)\n",
    "df_te_zheng.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "969f77d5",
   "metadata": {},
   "source": [
    "## 页面的布局\n",
    "\n",
    "* Streamlit 可以使用 st.sidebar 在左侧面板侧边栏中轻松组织小部件。 传递给 st.sidebar 的每个元素都固定在左侧，允许用户专注于应用程序中的内容，同时仍然可以访问 UI 控件。\n",
    "\n",
    "* st.columns 允许您并排放置小部件"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e92bb96c",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Add a selectbox to the sidebar:\n",
    "add_selectbox = st.sidebar.selectbox(\n",
    "    'How would you like to be contacted?',\n",
    "    ('Email', 'Home phone', 'Mobile phone')\n",
    ")\n",
    "\n",
    "# Add a slider to the sidebar:\n",
    "add_slider = st.sidebar.slider(\n",
    "    'Select a range of values',\n",
    "    0.0, 100.0, (25.0, 75.0)\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "04fbac47",
   "metadata": {},
   "outputs": [],
   "source": [
    "left_column, right_column = st.columns(2)\n",
    "# You can use a column just like st.sidebar:\n",
    "left_column.button('Press me!')\n",
    "\n",
    "# Or even better, call Streamlit functions inside a \"with\" block:\n",
    "with right_column:\n",
    "    chosen = st.radio(\n",
    "        'Sorting hat',\n",
    "        (\"Gryffindor\", \"Ravenclaw\", \"Hufflepuff\", \"Slytherin\"))\n",
    "    st.write(f\"You are in {chosen} house!\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "93709ac6",
   "metadata": {},
   "outputs": [],
   "source": [
    "col1, col2 = st.columns([3, 1])\n",
    "data = np.random.randn(10, 1)\n",
    "\n",
    "col1.subheader(\"A wide column with a chart\")\n",
    "col1.line_chart(data)\n",
    "\n",
    "col2.subheader(\"A narrow column with the data\")\n",
    "col2.write(data)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ebd1e1ab",
   "metadata": {},
   "source": [
    "## 多媒体的展现\n",
    "\n",
    "https://docs.streamlit.io/library/api-reference/media\n",
    "\n",
    "* st.image\n",
    "\n",
    "* st.audio\n",
    "\n",
    "* st.video"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "4c6a6919",
   "metadata": {},
   "outputs": [],
   "source": [
    "import streamlit as st\n",
    "from PIL import Image\n",
    "\n",
    "image = Image.open('sunrise.jpg')\n",
    "\n",
    "st.image(image, caption='Sunrise by the mountains')\n",
    "st.image(\"http://abs.hznu.edu.cn/upload/resources/image/2022/07/31/7729995.jpg\", caption='Sunrise by the mountains')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "fb856fa0",
   "metadata": {},
   "outputs": [],
   "source": [
    "video_file = open('myvideo.mp4', 'rb')\n",
    "video_bytes = video_file.read()\n",
    "\n",
    "st.video(video_bytes)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "3630d9b9",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "0.375"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "3/8"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "a3c5645c",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "0.1875"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "4*3/(8*8)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "c9687072",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "2.0"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "0.375/0.1875"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "366c7e8e",
   "metadata": {},
   "source": [
    "## 特殊数字的展示\n",
    "\n",
    "* st.metric\n",
    "\n",
    "https://docs.streamlit.io/library/api-reference/data/st.metric"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "544d2428",
   "metadata": {},
   "outputs": [],
   "source": [
    "st.metric(label=\"Temperature\", value=\"70 °F\", delta=\"1.2 °F\")\n",
    "\n",
    "col1, col2, col3 = st.columns(3)\n",
    "col1.metric(\"Temperature\", \"70 °F\", \"1.2 °F\")\n",
    "col2.metric(\"Wind\", \"9 mph\", \"-8%\")\n",
    "col3.metric(\"Humidity\", \"86%\", \"4%\")\n",
    "\n",
    "st.metric(label=\"Gas price\", value=4, delta=-0.5,\n",
    "    delta_color=\"inverse\")\n",
    "\n",
    "st.metric(label=\"Active developers\", value=123, delta=123,\n",
    "    delta_color=\"off\")"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "5078e04b",
   "metadata": {},
   "source": [
    "## classwork 1 (布局的初步应用)\n",
    "\n",
    "1，请将上节课作业中的组件移入侧边栏\n",
    "\n",
    "* st.image\n",
    "\n",
    "2，请找两张图片，并排显示在页面上\n",
    "\n",
    "* 特殊数值展示（st.metric）-以粗体大字体显示数值。\n",
    "\n",
    "3, 拷贝课件的代码显示各个店铺的特征数据框\n",
    "\n",
    "4，选择某个店铺的特征并通过st.metric并排展示在页面上"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "07efe56d",
   "metadata": {},
   "outputs": [],
   "source": [
    "#这是上节课作业代码\n",
    "a=pd.read_csv(r\"D:\\try\\shoes.csv\")\n",
    "a.sales=a.sales.str.replace(\"人付款\",\"\").astype(int)\n",
    "\n",
    "\n",
    "option4 = st.multiselect(\n",
    "    'What are your favorite shopes',\n",
    "    a.groupby(\"nick\").size().sort_values(ascending=False).index,\n",
    "    ['意尔康男鞋旗舰店'])\n",
    "\n",
    "p1=a.groupby('info.鞋面材质').size().sort_values()\n",
    "p1.name=\"all\"\n",
    "\n",
    "chart0 = {\n",
    "  \"yAxis\": {\n",
    "    \"type\": 'category',\n",
    "    \"data\": p1.index.tolist()\n",
    "  },\n",
    "  \"xAxis\": {\n",
    "    \"type\": 'value'\n",
    "  },\n",
    "  \"legend\": {},\n",
    "  \"series\": [\n",
    "      {\n",
    "        \"data\": p1.values.tolist(),\n",
    "        \"type\": 'bar',\n",
    "        \"name\":\"all\"\n",
    "      },\n",
    "  ]\n",
    "}\n",
    "\n",
    "for i in option4:\n",
    "    p2=a[a[\"nick\"]==i].groupby('info.鞋面材质').size()\n",
    "    p2.name=i\n",
    "    p1=pd.concat([p1,p2],axis=1).fillna(0)\n",
    "    chart0[\"series\"].append({\n",
    "      \"data\": p1[i].values.tolist(),\n",
    "      \"type\": 'bar',\n",
    "      \"name\": i\n",
    "    })\n",
    "\n",
    "st_echarts(chart0)\n",
    "\n",
    "p1\n",
    "\n",
    "option0 = st.selectbox(\n",
    "    '选择鞋面材质',\n",
    "     a[\"info.鞋面材质\"].unique())\n",
    "option1 = st.slider('price',0.,a.price.max()/4,(100.,300.))\n",
    "option2 = st.slider('sales',0,a.sales.max(),(100,300))\n",
    "\n",
    "option3 = st.multiselect(\n",
    "    'What are your favorite colors',\n",
    "    a.columns,\n",
    "    ['nick','title','price', 'sales'])\n",
    "\n",
    "a1=a[(a[\"info.鞋面材质\"]==option0)&(a.price>option1[0])&(a.price<option1[1])\n",
    "     &(a.sales>option2[0])&(a.sales<option2[1])][option3]\n",
    "\n",
    "a1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "0ee46d82",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>nick</th>\n",
       "      <th>z_xse</th>\n",
       "      <th>z_num</th>\n",
       "      <th>p_sales</th>\n",
       "      <th>p_bdj</th>\n",
       "      <th>p_price</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>285</th>\n",
       "      <td>意尔康皮鞋旗舰店</td>\n",
       "      <td>3558446.0</td>\n",
       "      <td>289</td>\n",
       "      <td>47.8</td>\n",
       "      <td>257.4</td>\n",
       "      <td>485.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>284</th>\n",
       "      <td>意尔康男鞋旗舰店</td>\n",
       "      <td>792685.0</td>\n",
       "      <td>149</td>\n",
       "      <td>18.0</td>\n",
       "      <td>296.3</td>\n",
       "      <td>680.8</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>281</th>\n",
       "      <td>意尔康品牌店</td>\n",
       "      <td>114452.0</td>\n",
       "      <td>65</td>\n",
       "      <td>7.7</td>\n",
       "      <td>229.8</td>\n",
       "      <td>271.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>161</th>\n",
       "      <td>乙方乙方88888</td>\n",
       "      <td>88144.0</td>\n",
       "      <td>9</td>\n",
       "      <td>60.3</td>\n",
       "      <td>162.3</td>\n",
       "      <td>164.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>197</th>\n",
       "      <td>吸引力xl</td>\n",
       "      <td>43870.0</td>\n",
       "      <td>5</td>\n",
       "      <td>59.0</td>\n",
       "      <td>148.7</td>\n",
       "      <td>152.0</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "          nick      z_xse  z_num  p_sales  p_bdj  p_price\n",
       "285   意尔康皮鞋旗舰店  3558446.0    289     47.8  257.4    485.7\n",
       "284   意尔康男鞋旗舰店   792685.0    149     18.0  296.3    680.8\n",
       "281     意尔康品牌店   114452.0     65      7.7  229.8    271.5\n",
       "161  乙方乙方88888    88144.0      9     60.3  162.3    164.7\n",
       "197      吸引力xl    43870.0      5     59.0  148.7    152.0"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df_te_zheng.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "d16820bf",
   "metadata": {},
   "outputs": [],
   "source": [
    "df_te_zheng.set_index(\"nick\",inplace=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "3b833ee9",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div>\n",
       "<style scoped>\n",
       "    .dataframe tbody tr th:only-of-type {\n",
       "        vertical-align: middle;\n",
       "    }\n",
       "\n",
       "    .dataframe tbody tr th {\n",
       "        vertical-align: top;\n",
       "    }\n",
       "\n",
       "    .dataframe thead th {\n",
       "        text-align: right;\n",
       "    }\n",
       "</style>\n",
       "<table border=\"1\" class=\"dataframe\">\n",
       "  <thead>\n",
       "    <tr style=\"text-align: right;\">\n",
       "      <th></th>\n",
       "      <th>z_xse</th>\n",
       "      <th>z_num</th>\n",
       "      <th>p_sales</th>\n",
       "      <th>p_bdj</th>\n",
       "      <th>p_price</th>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>nick</th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "      <th></th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>意尔康皮鞋旗舰店</th>\n",
       "      <td>3558446.0</td>\n",
       "      <td>289</td>\n",
       "      <td>47.8</td>\n",
       "      <td>257.4</td>\n",
       "      <td>485.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>意尔康男鞋旗舰店</th>\n",
       "      <td>792685.0</td>\n",
       "      <td>149</td>\n",
       "      <td>18.0</td>\n",
       "      <td>296.3</td>\n",
       "      <td>680.8</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>意尔康品牌店</th>\n",
       "      <td>114452.0</td>\n",
       "      <td>65</td>\n",
       "      <td>7.7</td>\n",
       "      <td>229.8</td>\n",
       "      <td>271.5</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>乙方乙方88888</th>\n",
       "      <td>88144.0</td>\n",
       "      <td>9</td>\n",
       "      <td>60.3</td>\n",
       "      <td>162.3</td>\n",
       "      <td>164.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>吸引力xl</th>\n",
       "      <td>43870.0</td>\n",
       "      <td>5</td>\n",
       "      <td>59.0</td>\n",
       "      <td>148.7</td>\n",
       "      <td>152.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>...</th>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "      <td>...</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>yek108</th>\n",
       "      <td>0.0</td>\n",
       "      <td>3</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>398.7</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>热血无极限</th>\n",
       "      <td>0.0</td>\n",
       "      <td>2</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>148.9</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>燕轩品牌店</th>\n",
       "      <td>0.0</td>\n",
       "      <td>1</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>178.0</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>爱鞋坊2012</th>\n",
       "      <td>0.0</td>\n",
       "      <td>3</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>379.3</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>龙凤吉祥4249</th>\n",
       "      <td>0.0</td>\n",
       "      <td>3</td>\n",
       "      <td>0.0</td>\n",
       "      <td>0.0</td>\n",
       "      <td>158.7</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "<p>482 rows × 5 columns</p>\n",
       "</div>"
      ],
      "text/plain": [
       "               z_xse  z_num  p_sales  p_bdj  p_price\n",
       "nick                                                \n",
       "意尔康皮鞋旗舰店   3558446.0    289     47.8  257.4    485.7\n",
       "意尔康男鞋旗舰店    792685.0    149     18.0  296.3    680.8\n",
       "意尔康品牌店      114452.0     65      7.7  229.8    271.5\n",
       "乙方乙方88888    88144.0      9     60.3  162.3    164.7\n",
       "吸引力xl        43870.0      5     59.0  148.7    152.0\n",
       "...              ...    ...      ...    ...      ...\n",
       "yek108           0.0      3      0.0    0.0    398.7\n",
       "热血无极限            0.0      2      0.0    0.0    148.9\n",
       "燕轩品牌店            0.0      1      0.0    0.0    178.0\n",
       "爱鞋坊2012          0.0      3      0.0    0.0    379.3\n",
       "龙凤吉祥4249         0.0      3      0.0    0.0    158.7\n",
       "\n",
       "[482 rows x 5 columns]"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df_te_zheng"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "528b28c0",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "z_xse      3558446.0\n",
       "z_num          289.0\n",
       "p_sales         47.8\n",
       "p_bdj          257.4\n",
       "p_price        485.7\n",
       "Name: 意尔康皮鞋旗舰店, dtype: float64"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "df_te_zheng.loc[\"意尔康皮鞋旗舰店\"]"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "56b3e944",
   "metadata": {},
   "source": [
    "## 布局组件与echarts的兼容问题\n",
    "\n",
    "https://github.com/andfanilo/streamlit-echarts/issues/43\n",
    "\n",
    "需要在程序开头加入如下代码：\n",
    "    \n",
    "并且所有echarts图片必须以函数的形式引入"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d4ce1930",
   "metadata": {},
   "outputs": [],
   "source": [
    "#st.markdown(\" <style>iframe{ height: 300px !important } \", unsafe_allow_html=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "77ebef55",
   "metadata": {},
   "source": [
    "* 如下代码是可以正常运行的"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "94e8ee79",
   "metadata": {},
   "outputs": [
    {
     "name": "stderr",
     "output_type": "stream",
     "text": [
      "2023-03-14 19:47:47.644 \n",
      "  \u001b[33m\u001b[1mWarning:\u001b[0m to view this Streamlit app on a browser, run it with the following\n",
      "  command:\n",
      "\n",
      "    streamlit run G:\\anaconda\\lib\\site-packages\\ipykernel_launcher.py [ARGUMENTS]\n"
     ]
    }
   ],
   "source": [
    "import streamlit as st\n",
    "from streamlit_echarts import st_echarts\n",
    "from pyecharts import options as opts\n",
    "from pyecharts.charts import Bar\n",
    "from streamlit_echarts import st_pyecharts\n",
    "import pandas as pd\n",
    "import numpy as np\n",
    "\n",
    "#下面这行程序必须写入\n",
    "st.markdown(\" <style>iframe{ height: 300px !important } \", unsafe_allow_html=True)\n",
    "\n",
    "\n",
    "a=pd.read_csv(r\"D:\\try\\shoes.csv\")\n",
    "\n",
    "a_xm=a.groupby(\"info.鞋面材质\").size()\n",
    "\n",
    "def echart_shoes():\n",
    "    return {\n",
    "        \"color\":\"red\",\n",
    "        \"tooltip\": {\n",
    "          \"trigger\": 'axis',\n",
    "          \"axisPointer\": {\n",
    "            \"type\": 'shadow'\n",
    "          }\n",
    "        },\n",
    "        \"xAxis\": {\n",
    "            \"type\": \"category\",\n",
    "            \"data\": a_xm.index.tolist(),\n",
    "        },\n",
    "        \"yAxis\": {\"type\": \"value\"},\n",
    "        \"series\": [\n",
    "            {\"data\": a_xm.values.tolist(), \"type\": \"line\"}\n",
    "        ],\n",
    "    }\n",
    "\n",
    "def echarts_random_options():\n",
    "    return {\n",
    "        \"xAxis\": {\"type\": \"category\", \"data\": [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"]},\n",
    "        \"yAxis\": {\"type\": \"value\"},\n",
    "        \"series\": [\n",
    "            {\"data\": list(np.random.random(size=7) * 800),\n",
    "             \"type\": \"line\"}\n",
    "        ],\n",
    "    }\n",
    "\n",
    "    \n",
    "left_column, right_column = st.columns(2)\n",
    "\n",
    "with left_column:\n",
    "    st_echarts(options=echart_shoes())\n",
    "\n",
    "\n",
    "with right_column:\n",
    "    st_echarts(options=echarts_random_options())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "fbacbefe",
   "metadata": {},
   "source": [
    "### classwork 2\n",
    "\n",
    "* 在echarts官网找两张图并列输出试试\n",
    "\n",
    "* 拷贝代码完成店铺特征数据的输出，利用多选框选择不同的店铺，输出对应的数据框\n",
    "\n",
    "st.sidebar.multiselect\n",
    "\n",
    "* 基于选择后的数据框做雷达图，并与上题的数据框并列输出\n",
    "\n",
    "https://echarts.apache.org/examples/zh/editor.html?c=radar"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ca7536a6",
   "metadata": {},
   "source": [
    "## echarts事件与图表下钻在streamlit中的实现\n",
    "\n",
    "https://github.com/andfanilo/streamlit-echarts\n",
    "\n",
    "* echarts的事件与js函数\n",
    "* echarts的隐含参数params"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1cc4fd1b",
   "metadata": {},
   "outputs": [],
   "source": [
    "option = {\n",
    "    \"xAxis\": {\n",
    "        \"type\": \"category\",\n",
    "        \"data\": [\"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\", \"Sun\"],\n",
    "    },\n",
    "    \"yAxis\": { \"type\": \"value\" },\n",
    "    \"series\": [\n",
    "        {\"data\": [820, 932, 901, 934, 1290, 1330, 1320], \"type\": \"line\" }\n",
    "    ],\n",
    "}\n",
    "events = {\n",
    "    \"click\": \"function(params) { console.log(params.name); return params.name }\",\n",
    "    \"dblclick\":\"function(params) { return [params.type, params.name, params.value] }\"\n",
    "}\n",
    "value = st_echarts(option, events=events)\n",
    "st.write(value)  # shows name on bar click and type+name+value on bar double click"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a75beb8a",
   "metadata": {},
   "source": [
    "### classwork3\n",
    "\n",
    "* 导入男鞋数据，基于“info.鞋面材质”groupby，求此列的商品数量，并作柱图，并且点击柱子输出对应的数据\n",
    "\n",
    "* 点击上图柱子，输出对应材质的男鞋价格分布（注意这时双数值轴，要固定x轴范围）\n",
    "\n",
    "https://echarts.apache.org/examples/zh/editor.html?c=line-in-cartesian-coordinate-system"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "fa33fbb5",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Index(['_id.$oid', 'info.上市年份季节', 'info.上市时间', 'info.产品名称', 'info.低帮鞋品名',\n",
       "       'info.功能', 'info.吊牌价', 'info.品牌', 'info.图案', 'info.场合', 'info.外底材料',\n",
       "       'info.季节', 'info.尺码', 'info.帮面内里材质', 'info.帮面材质', 'info.性别',\n",
       "       'info.是否商场同款', 'info.是否瑕疵', 'info.款号', 'info.款式', 'info.流行元素',\n",
       "       'info.真皮材质工艺', 'info.细分风格', 'info.货号', 'info.跟底款式', 'info.运动系列',\n",
       "       'info.运动鞋科技', 'info.适合路面', 'info.适用对象', 'info.销售渠道类型', 'info.闭合方式',\n",
       "       'info.靴子品名', 'info.靴筒内里材质', 'info.靴筒材质', 'info.靴筒高度', 'info.鞋制作工艺',\n",
       "       'info.鞋垫材质', 'info.鞋头款式', 'info.鞋底材质', 'info.鞋码', 'info.鞋跟高',\n",
       "       'info.鞋面内里材质', 'info.鞋面材质', 'info.颜色分类', 'info.风格', 'itemid',\n",
       "       'location', 'nick', 'price', 'sales', 'title', 'url', 'xse'],\n",
       "      dtype='object')"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a1.columns"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "cb419804",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "price\n",
       "16.9      1\n",
       "17.9      1\n",
       "18.0      3\n",
       "25.0      1\n",
       "58.0      4\n",
       "         ..\n",
       "2399.0    4\n",
       "2999.0    2\n",
       "3099.0    4\n",
       "3499.0    4\n",
       "6999.0    4\n",
       "Length: 383, dtype: int64"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "jiage=a1.groupby(\"price\").size()\n",
    "jiage"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "33c7eaa8",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[(16.9, 1),\n",
       " (17.9, 1),\n",
       " (18.0, 3),\n",
       " (25.0, 1),\n",
       " (58.0, 4),\n",
       " (59.0, 1),\n",
       " (69.0, 3),\n",
       " (88.0, 2),\n",
       " (89.0, 4),\n",
       " (97.02, 1),\n",
       " (98.0, 5),\n",
       " (99.0, 17),\n",
       " (105.0, 1),\n",
       " (106.82, 1),\n",
       " (108.0, 2),\n",
       " (109.0, 7),\n",
       " (111.0, 1),\n",
       " (115.0, 7),\n",
       " (118.0, 31),\n",
       " (118.72, 1),\n",
       " (118.99, 1),\n",
       " (119.0, 4),\n",
       " (119.9, 2),\n",
       " (120.0, 1),\n",
       " (120.12, 1),\n",
       " (123.0, 2),\n",
       " (124.12, 1),\n",
       " (125.0, 1),\n",
       " (125.44, 1),\n",
       " (126.0, 1),\n",
       " (127.0, 2),\n",
       " (127.9, 1),\n",
       " (128.0, 82),\n",
       " (129.0, 12),\n",
       " (129.8, 1),\n",
       " (130.0, 1),\n",
       " (130.8, 1),\n",
       " (131.0, 1),\n",
       " (132.0, 4),\n",
       " (133.0, 8),\n",
       " (135.0, 7),\n",
       " (135.24, 1),\n",
       " (136.0, 1),\n",
       " (136.22, 1),\n",
       " (137.0, 10),\n",
       " (137.4, 1),\n",
       " (137.9, 1),\n",
       " (138.0, 38),\n",
       " (139.0, 30),\n",
       " (139.3, 1),\n",
       " (140.0, 6),\n",
       " (141.0, 2),\n",
       " (142.0, 3),\n",
       " (142.2, 1),\n",
       " (142.8, 1),\n",
       " (143.0, 8),\n",
       " (143.4, 1),\n",
       " (144.0, 1),\n",
       " (145.0, 8),\n",
       " (146.0, 24),\n",
       " (147.0, 5),\n",
       " (148.0, 103),\n",
       " (149.0, 39),\n",
       " (149.8, 1),\n",
       " (150.0, 15),\n",
       " (150.12, 2),\n",
       " (151.0, 1),\n",
       " (152.0, 8),\n",
       " (153.0, 5),\n",
       " (154.8, 1),\n",
       " (154.84, 3),\n",
       " (155.0, 5),\n",
       " (155.82, 2),\n",
       " (156.0, 20),\n",
       " (157.0, 2),\n",
       " (158.0, 160),\n",
       " (158.47, 1),\n",
       " (158.87, 1),\n",
       " (159.0, 47),\n",
       " (159.64, 1),\n",
       " (159.8, 1),\n",
       " (160.0, 3),\n",
       " (161.0, 15),\n",
       " (162.0, 21),\n",
       " (162.8, 1),\n",
       " (163.0, 3),\n",
       " (163.34, 1),\n",
       " (164.0, 1),\n",
       " (165.0, 15),\n",
       " (165.62, 1),\n",
       " (166.0, 16),\n",
       " (167.0, 3),\n",
       " (168.0, 170),\n",
       " (168.34, 1),\n",
       " (168.87, 3),\n",
       " (169.0, 51),\n",
       " (169.2, 1),\n",
       " (169.64, 1),\n",
       " (169.72, 1),\n",
       " (170.0, 1),\n",
       " (171.0, 11),\n",
       " (172.0, 10),\n",
       " (173.0, 4),\n",
       " (174.0, 2),\n",
       " (174.44, 6),\n",
       " (175.0, 11),\n",
       " (176.0, 23),\n",
       " (176.4, 1),\n",
       " (177.0, 3),\n",
       " (178.0, 97),\n",
       " (178.8, 1),\n",
       " (179.0, 42),\n",
       " (180.0, 2),\n",
       " (181.0, 13),\n",
       " (181.3, 1),\n",
       " (182.0, 16),\n",
       " (183.0, 1),\n",
       " (184.0, 2),\n",
       " (184.24, 4),\n",
       " (185.0, 15),\n",
       " (185.22, 1),\n",
       " (186.0, 22),\n",
       " (187.0, 6),\n",
       " (187.2, 1),\n",
       " (188.0, 56),\n",
       " (188.87, 1),\n",
       " (189.0, 47),\n",
       " (189.87, 1),\n",
       " (189.9, 1),\n",
       " (190.0, 4),\n",
       " (190.8, 1),\n",
       " (191.0, 2),\n",
       " (192.0, 8),\n",
       " (193.0, 2),\n",
       " (194.04, 1),\n",
       " (194.6, 1),\n",
       " (195.0, 14),\n",
       " (195.02, 2),\n",
       " (196.0, 31),\n",
       " (197.0, 3),\n",
       " (198.0, 119),\n",
       " (199.0, 104),\n",
       " (201.0, 7),\n",
       " (201.2, 1),\n",
       " (202.0, 5),\n",
       " (203.0, 5),\n",
       " (203.84, 1),\n",
       " (204.82, 2),\n",
       " (205.0, 10),\n",
       " (206.0, 22),\n",
       " (208.0, 33),\n",
       " (209.0, 74),\n",
       " (212.0, 3),\n",
       " (213.0, 6),\n",
       " (214.62, 1),\n",
       " (215.0, 4),\n",
       " (216.0, 8),\n",
       " (218.0, 38),\n",
       " (218.6, 1),\n",
       " (218.87, 2),\n",
       " (219.0, 67),\n",
       " (221.0, 2),\n",
       " (222.0, 7),\n",
       " (223.0, 2),\n",
       " (223.44, 1),\n",
       " (224.0, 1),\n",
       " (225.0, 6),\n",
       " (225.8, 4),\n",
       " (226.0, 1),\n",
       " (226.4, 2),\n",
       " (228.0, 38),\n",
       " (228.8, 1),\n",
       " (228.87, 2),\n",
       " (229.0, 30),\n",
       " (229.2, 1),\n",
       " (231.0, 6),\n",
       " (232.0, 1),\n",
       " (233.0, 3),\n",
       " (234.22, 1),\n",
       " (235.0, 2),\n",
       " (236.0, 4),\n",
       " (238.0, 40),\n",
       " (239.0, 59),\n",
       " (242.0, 3),\n",
       " (243.0, 5),\n",
       " (243.2, 1),\n",
       " (245.0, 4),\n",
       " (246.0, 3),\n",
       " (248.0, 93),\n",
       " (249.0, 38),\n",
       " (250.0, 2),\n",
       " (252.0, 1),\n",
       " (253.0, 2),\n",
       " (255.0, 2),\n",
       " (256.0, 6),\n",
       " (258.0, 45),\n",
       " (259.0, 80),\n",
       " (260.0, 1),\n",
       " (261.0, 2),\n",
       " (263.0, 2),\n",
       " (265.0, 5),\n",
       " (266.0, 4),\n",
       " (268.0, 44),\n",
       " (269.0, 56),\n",
       " (270.0, 2),\n",
       " (272.0, 2),\n",
       " (273.0, 8),\n",
       " (275.0, 6),\n",
       " (276.0, 13),\n",
       " (278.0, 44),\n",
       " (279.0, 53),\n",
       " (280.0, 4),\n",
       " (281.0, 1),\n",
       " (282.0, 2),\n",
       " (283.0, 2),\n",
       " (285.0, 1),\n",
       " (285.2, 1),\n",
       " (286.0, 4),\n",
       " (287.1, 32),\n",
       " (288.0, 24),\n",
       " (289.0, 90),\n",
       " (290.0, 2),\n",
       " (292.37, 2),\n",
       " (295.0, 14),\n",
       " (296.0, 3),\n",
       " (298.0, 53),\n",
       " (298.5, 1),\n",
       " (299.0, 117),\n",
       " (300.0, 1),\n",
       " (302.0, 3),\n",
       " (305.0, 4),\n",
       " (306.0, 1),\n",
       " (308.0, 64),\n",
       " (309.0, 36),\n",
       " (310.0, 3),\n",
       " (311.0, 1),\n",
       " (315.0, 8),\n",
       " (316.0, 2),\n",
       " (318.0, 60),\n",
       " (319.0, 104),\n",
       " (320.0, 3),\n",
       " (321.0, 1),\n",
       " (325.0, 2),\n",
       " (328.0, 25),\n",
       " (329.0, 59),\n",
       " (330.0, 6),\n",
       " (332.8, 1),\n",
       " (335.0, 6),\n",
       " (336.0, 1),\n",
       " (338.0, 23),\n",
       " (339.0, 69),\n",
       " (340.0, 5),\n",
       " (342.0, 2),\n",
       " (343.0, 1),\n",
       " (345.0, 8),\n",
       " (346.0, 1),\n",
       " (348.0, 15),\n",
       " (349.0, 36),\n",
       " (350.0, 2),\n",
       " (351.0, 1),\n",
       " (355.0, 5),\n",
       " (356.0, 5),\n",
       " (358.0, 28),\n",
       " (358.72, 1),\n",
       " (359.0, 43),\n",
       " (359.1, 20),\n",
       " (360.0, 5),\n",
       " (362.0, 1),\n",
       " (363.0, 1),\n",
       " (364.0, 1),\n",
       " (365.0, 6),\n",
       " (368.0, 44),\n",
       " (369.0, 32),\n",
       " (370.0, 3),\n",
       " (375.0, 12),\n",
       " (375.78, 1),\n",
       " (376.0, 4),\n",
       " (377.06, 2),\n",
       " (377.1, 114),\n",
       " (378.0, 22),\n",
       " (379.0, 38),\n",
       " (380.0, 4),\n",
       " (385.0, 3),\n",
       " (385.07, 8),\n",
       " (388.0, 53),\n",
       " (389.0, 35),\n",
       " (390.0, 1),\n",
       " (392.0, 1),\n",
       " (395.0, 8),\n",
       " (395.1, 117),\n",
       " (396.0, 3),\n",
       " (398.0, 86),\n",
       " (399.0, 61),\n",
       " (403.41, 8),\n",
       " (405.0, 1),\n",
       " (405.1, 1),\n",
       " (408.0, 25),\n",
       " (409.0, 10),\n",
       " (410.0, 1),\n",
       " (413.0, 4),\n",
       " (413.1, 38),\n",
       " (415.0, 1),\n",
       " (418.0, 9),\n",
       " (419.0, 32),\n",
       " (428.0, 9),\n",
       " (429.0, 12),\n",
       " (434.0, 1),\n",
       " (436.0, 1),\n",
       " (438.0, 14),\n",
       " (439.0, 38),\n",
       " (440.0, 1),\n",
       " (440.1, 25),\n",
       " (448.23, 1),\n",
       " (449.0, 7),\n",
       " (458.0, 7),\n",
       " (459.0, 10),\n",
       " (468.0, 3),\n",
       " (469.0, 13),\n",
       " (478.0, 5),\n",
       " (479.0, 2),\n",
       " (480.0, 1),\n",
       " (488.0, 5),\n",
       " (489.0, 7),\n",
       " (490.0, 1),\n",
       " (498.0, 15),\n",
       " (499.0, 7),\n",
       " (500.0, 2),\n",
       " (508.0, 2),\n",
       " (509.0, 5),\n",
       " (516.0, 1),\n",
       " (518.0, 1),\n",
       " (519.0, 2),\n",
       " (528.0, 1),\n",
       " (529.0, 6),\n",
       " (539.0, 4),\n",
       " (548.0, 1),\n",
       " (549.0, 10),\n",
       " (550.0, 3),\n",
       " (558.0, 1),\n",
       " (559.0, 1),\n",
       " (566.0, 1),\n",
       " (568.0, 3),\n",
       " (569.0, 9),\n",
       " (571.0, 1),\n",
       " (576.0, 1),\n",
       " (578.0, 1),\n",
       " (579.0, 1),\n",
       " (588.0, 4),\n",
       " (589.0, 5),\n",
       " (590.2, 1),\n",
       " (596.0, 1),\n",
       " (598.0, 10),\n",
       " (599.0, 2),\n",
       " (609.0, 1),\n",
       " (627.2, 1),\n",
       " (628.0, 11),\n",
       " (629.0, 5),\n",
       " (638.0, 5),\n",
       " (649.0, 2),\n",
       " (658.0, 2),\n",
       " (659.0, 4),\n",
       " (669.0, 1),\n",
       " (678.0, 1),\n",
       " (688.0, 1),\n",
       " (689.0, 1),\n",
       " (698.0, 6),\n",
       " (738.0, 1),\n",
       " (740.0, 1),\n",
       " (798.0, 1),\n",
       " (998.0, 1),\n",
       " (1458.0, 1),\n",
       " (1699.0, 2),\n",
       " (1799.0, 2),\n",
       " (1880.0, 1),\n",
       " (1899.0, 2),\n",
       " (1999.0, 16),\n",
       " (2099.0, 2),\n",
       " (2199.0, 4),\n",
       " (2399.0, 4),\n",
       " (2999.0, 2),\n",
       " (3099.0, 4),\n",
       " (3499.0, 4),\n",
       " (6999.0, 4)]"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "list(jiage.items())"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "9274bef9",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "info.鞋面材质\n",
       "PU             671\n",
       "二层牛皮（除牛反绒）     605\n",
       "二层猪皮             8\n",
       "人造革             80\n",
       "塑胶              10\n",
       "多种材质拼接          21\n",
       "太空革              9\n",
       "头层牛皮（除牛反绒）    3470\n",
       "头层猪皮             6\n",
       "布                8\n",
       "棉布               1\n",
       "牛仔布              2\n",
       "牛反绒             12\n",
       "磨砂皮             14\n",
       "绒面              15\n",
       "网布               7\n",
       "羊皮毛一体            1\n",
       "超纤              35\n",
       "超纤皮              1\n",
       "鳄鱼皮              4\n",
       "dtype: int64"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "a1.groupby(\"info.鞋面材质\").size()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "b06980c9",
   "metadata": {},
   "outputs": [],
   "source": [
    "x1=a[a[\"info.鞋面材质\"]==\"PU\"].groupby(\"price\").size()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 20,
   "id": "866206d8",
   "metadata": {},
   "outputs": [],
   "source": [
    "data=[]\n",
    "for i in x1.items():\n",
    "    data.append(list(i))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "id": "da1db5f8",
   "metadata": {},
   "outputs": [],
   "source": [
    "        \"xAxis\": {\n",
    "            \"min\":0,\n",
    "            \"max\":600\n",
    "        },"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "326b7b89",
   "metadata": {},
   "source": [
    "## 地图\n",
    "\n",
    "https://github.com/andfanilo/streamlit-echarts-demo\n",
    "\n",
    "* json格式的地图及其导入\n",
    "* 地图数据\n",
    "* jscode\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "04ed1b0a",
   "metadata": {},
   "outputs": [],
   "source": [
    "# -*- coding: utf-8 -*-\n",
    "\"\"\"\n",
    "Created on Mon Mar 20 18:21:36 2023\n",
    "\n",
    "@author: wp\n",
    "\"\"\"\n",
    "\n",
    "import json\n",
    "from streamlit_echarts import Map\n",
    "from streamlit_echarts import JsCode\n",
    "from streamlit_echarts import st_echarts\n",
    "\n",
    "\n",
    "def render_usa():\n",
    "    formatter = JsCode(\n",
    "        \"function (params) {\"\n",
    "        + \"var value = (params.value + '').split('.');\"\n",
    "        + \"value = value[0].replace(/(\\d{1,3})(?=(?:\\d{3})+(?!\\d))/g, '$1,');\"\n",
    "        + \"return params.seriesName + '<br/>' + params.name + ': ' + value;}\"\n",
    "    ).js_code\n",
    "\n",
    "    with open(r\"F:\\notebooks1\\streamlit\\USA.json\", \"r\") as f:\n",
    "        map = Map(\n",
    "            \"USA\",\n",
    "            json.loads(f.read()),\n",
    "            {\n",
    "                \"Alaska\": {\"left\": -131, \"top\": 25, \"width\": 15},\n",
    "                \"Hawaii\": {\"left\": -110, \"top\": 28, \"width\": 5},\n",
    "                \"Puerto Rico\": {\"left\": -76, \"top\": 26, \"width\": 2},\n",
    "            },\n",
    "        )\n",
    "    options = {\n",
    "        \"title\": {\n",
    "            \"text\": \"USA Population Estimates (2012)\",\n",
    "            \"subtext\": \"Data from www.census.gov\",\n",
    "            \"sublink\": \"http://www.census.gov/popest/data/datasets.html\",\n",
    "            \"left\": \"right\",\n",
    "        },\n",
    "        \"tooltip\": {\n",
    "            \"trigger\": \"item\",\n",
    "            \"showDelay\": 0,\n",
    "            \"transitionDuration\": 0.2,\n",
    "            \"formatter\": formatter,\n",
    "        },\n",
    "        \"visualMap\": {\n",
    "            \"left\": \"right\",\n",
    "            \"min\": 500000,\n",
    "            \"max\": 38000000,\n",
    "            \"inRange\": {\n",
    "                \"color\": [\n",
    "                    \"#313695\",\n",
    "                    \"#4575b4\",\n",
    "                    \"#74add1\",\n",
    "                    \"#abd9e9\",\n",
    "                    \"#e0f3f8\",\n",
    "                    \"#ffffbf\",\n",
    "                    \"#fee090\",\n",
    "                    \"#fdae61\",\n",
    "                    \"#f46d43\",\n",
    "                    \"#d73027\",\n",
    "                    \"#a50026\",\n",
    "                ]\n",
    "            },\n",
    "            \"text\": [\"High\", \"Low\"],\n",
    "            \"calculable\": True,\n",
    "        },\n",
    "        \"toolbox\": {\n",
    "            \"show\": True,\n",
    "            \"left\": \"left\",\n",
    "            \"top\": \"top\",\n",
    "            \"feature\": {\n",
    "                \"dataView\": {\"readOnly\": False},\n",
    "                \"restore\": {},\n",
    "                \"saveAsImage\": {},\n",
    "            },\n",
    "        },\n",
    "        \"series\": [\n",
    "            {\n",
    "                \"name\": \"USA PopEstimates\",\n",
    "                \"type\": \"map\",\n",
    "                \"roam\": True,\n",
    "                \"map\": \"USA\",\n",
    "                \"emphasis\": {\"label\": {\"show\": True}},\n",
    "                \"textFixed\": {\"Alaska\": [20, -20]},\n",
    "                \"data\": [\n",
    "                    {\"name\": \"Alabama\", \"value\": 4822023},\n",
    "                    {\"name\": \"Alaska\", \"value\": 731449},\n",
    "                    {\"name\": \"Arizona\", \"value\": 6553255},\n",
    "                    {\"name\": \"Arkansas\", \"value\": 2949131},\n",
    "                    {\"name\": \"California\", \"value\": 38041430},\n",
    "                    {\"name\": \"Colorado\", \"value\": 5187582},\n",
    "                    {\"name\": \"Connecticut\", \"value\": 3590347},\n",
    "                    {\"name\": \"Delaware\", \"value\": 917092},\n",
    "                    {\"name\": \"District of Columbia\", \"value\": 632323},\n",
    "                    {\"name\": \"Florida\", \"value\": 19317568},\n",
    "                    {\"name\": \"Georgia\", \"value\": 9919945},\n",
    "                    {\"name\": \"Hawaii\", \"value\": 1392313},\n",
    "                    {\"name\": \"Idaho\", \"value\": 1595728},\n",
    "                    {\"name\": \"Illinois\", \"value\": 12875255},\n",
    "                    {\"name\": \"Indiana\", \"value\": 6537334},\n",
    "                    {\"name\": \"Iowa\", \"value\": 3074186},\n",
    "                    {\"name\": \"Kansas\", \"value\": 2885905},\n",
    "                    {\"name\": \"Kentucky\", \"value\": 4380415},\n",
    "                    {\"name\": \"Louisiana\", \"value\": 4601893},\n",
    "                    {\"name\": \"Maine\", \"value\": 1329192},\n",
    "                    {\"name\": \"Maryland\", \"value\": 5884563},\n",
    "                    {\"name\": \"Massachusetts\", \"value\": 6646144},\n",
    "                    {\"name\": \"Michigan\", \"value\": 9883360},\n",
    "                    {\"name\": \"Minnesota\", \"value\": 5379139},\n",
    "                    {\"name\": \"Mississippi\", \"value\": 2984926},\n",
    "                    {\"name\": \"Missouri\", \"value\": 6021988},\n",
    "                    {\"name\": \"Montana\", \"value\": 1005141},\n",
    "                    {\"name\": \"Nebraska\", \"value\": 1855525},\n",
    "                    {\"name\": \"Nevada\", \"value\": 2758931},\n",
    "                    {\"name\": \"New Hampshire\", \"value\": 1320718},\n",
    "                    {\"name\": \"New Jersey\", \"value\": 8864590},\n",
    "                    {\"name\": \"New Mexico\", \"value\": 2085538},\n",
    "                    {\"name\": \"New York\", \"value\": 19570261},\n",
    "                    {\"name\": \"North Carolina\", \"value\": 9752073},\n",
    "                    {\"name\": \"North Dakota\", \"value\": 699628},\n",
    "                    {\"name\": \"Ohio\", \"value\": 11544225},\n",
    "                    {\"name\": \"Oklahoma\", \"value\": 3814820},\n",
    "                    {\"name\": \"Oregon\", \"value\": 3899353},\n",
    "                    {\"name\": \"Pennsylvania\", \"value\": 12763536},\n",
    "                    {\"name\": \"Rhode Island\", \"value\": 1050292},\n",
    "                    {\"name\": \"South Carolina\", \"value\": 4723723},\n",
    "                    {\"name\": \"South Dakota\", \"value\": 833354},\n",
    "                    {\"name\": \"Tennessee\", \"value\": 6456243},\n",
    "                    {\"name\": \"Texas\", \"value\": 26059203},\n",
    "                    {\"name\": \"Utah\", \"value\": 2855287},\n",
    "                    {\"name\": \"Vermont\", \"value\": 626011},\n",
    "                    {\"name\": \"Virginia\", \"value\": 8185867},\n",
    "                    {\"name\": \"Washington\", \"value\": 6897012},\n",
    "                    {\"name\": \"West Virginia\", \"value\": 1855413},\n",
    "                    {\"name\": \"Wisconsin\", \"value\": 5726398},\n",
    "                    {\"name\": \"Wyoming\", \"value\": 576412},\n",
    "                    {\"name\": \"Puerto Rico\", \"value\": 3667084},\n",
    "                ],\n",
    "            }\n",
    "        ],\n",
    "    }\n",
    "    st_echarts(options, map=map)\n",
    "\n",
    "\n",
    "render_usa()\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "6d314d51",
   "metadata": {},
   "source": [
    "### classwork 4（地图在页面的展示）\n",
    "\n",
    "* 简化代码，导入中国地图，并显示引入一个简单数据然后展示（encoding=\"utf-8\"）\n",
    "\n",
    "* 求每个省份的商品数量，并在地图中显示出来"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "2c29e086",
   "metadata": {},
   "outputs": [],
   "source": [
    "location=a.location.str.split(\" \",expand=True)\n",
    "a[\"province\"]=location[0]\n",
    "a[\"city\"]=location[1]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "id": "d31a3da3",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "('上海', 154)\n",
      "('北京', 339)\n",
      "('吉林', 1)\n",
      "('四川', 4)\n",
      "('安徽', 24)\n",
      "('山东', 44)\n",
      "('山西', 39)\n",
      "('广东', 284)\n",
      "('江苏', 120)\n",
      "('江西', 42)\n",
      "('河北', 86)\n",
      "('河南', 393)\n",
      "('浙江', 2470)\n",
      "('湖北', 27)\n",
      "('福建', 952)\n",
      "('贵州', 2)\n",
      "('辽宁', 3)\n",
      "('重庆', 3)\n",
      "[{'name': '上海', 'value': 154}, {'name': '北京', 'value': 339}, {'name': '吉林', 'value': 1}, {'name': '四川', 'value': 4}, {'name': '安徽', 'value': 24}, {'name': '山东', 'value': 44}, {'name': '山西', 'value': 39}, {'name': '广东', 'value': 284}, {'name': '江苏', 'value': 120}, {'name': '江西', 'value': 42}, {'name': '河北', 'value': 86}, {'name': '河南', 'value': 393}, {'name': '浙江', 'value': 2470}, {'name': '湖北', 'value': 27}, {'name': '福建', 'value': 952}, {'name': '贵州', 'value': 2}, {'name': '辽宁', 'value': 3}, {'name': '重庆', 'value': 3}]\n"
     ]
    }
   ],
   "source": [
    "data0=[]\n",
    "for i in a.groupby(\"province\").size().items():\n",
    "    data0.append({\"name\":i[0],\"value\":i[1]})\n",
    "print(data0)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "ef065b0b",
   "metadata": {},
   "outputs": [],
   "source": [
    "location=a.location.str.split(\" \",expand=True)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "e2db55fb",
   "metadata": {},
   "outputs": [],
   "source": [
    "a[\"province\"]=location[0]\n",
    "a[\"city\"]=location[1]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "id": "0703b666",
   "metadata": {},
   "outputs": [],
   "source": [
    "data=[]\n",
    "for i in a.groupby(\"province\").size().items():\n",
    "    data.append({\"name\":i[0],\"value\":i[1]})"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "id": "bd93c360",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "[{'name': '上海', 'value': 154},\n",
       " {'name': '北京', 'value': 339},\n",
       " {'name': '吉林', 'value': 1},\n",
       " {'name': '四川', 'value': 4},\n",
       " {'name': '安徽', 'value': 24},\n",
       " {'name': '山东', 'value': 44},\n",
       " {'name': '山西', 'value': 39},\n",
       " {'name': '广东', 'value': 284},\n",
       " {'name': '江苏', 'value': 120},\n",
       " {'name': '江西', 'value': 42},\n",
       " {'name': '河北', 'value': 86},\n",
       " {'name': '河南', 'value': 393},\n",
       " {'name': '浙江', 'value': 2470},\n",
       " {'name': '湖北', 'value': 27},\n",
       " {'name': '福建', 'value': 952},\n",
       " {'name': '贵州', 'value': 2},\n",
       " {'name': '辽宁', 'value': 3},\n",
       " {'name': '重庆', 'value': 3}]"
      ]
     },
     "execution_count": 19,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "d065ee12",
   "metadata": {},
   "outputs": [],
   "source": [
    "#list(zip([1,2],[3,4]))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "e66493dc",
   "metadata": {},
   "outputs": [],
   "source": [
    "#list(a.location.str.split(\" \").items())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ded38a31",
   "metadata": {},
   "source": [
    "### classwork5（地图的下钻）\n",
    "\n",
    "* 加入鼠标弹窗，显示省名与数值\n",
    "* 做出浙江省的商品数量地图\n",
    "* 在中国地图中加入点击事件，点击对应省份则展示对应省份的地图商品数"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "8c8c5d25",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.12"
  },
  "toc": {
   "base_numbering": 1,
   "nav_menu": {},
   "number_sections": true,
   "sideBar": true,
   "skip_h1_title": false,
   "title_cell": "Table of Contents",
   "title_sidebar": "Contents",
   "toc_cell": false,
   "toc_position": {
    "height": "calc(100% - 180px)",
    "left": "10px",
    "top": "150px",
    "width": "211.48px"
   },
   "toc_section_display": true,
   "toc_window_display": true
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
